<template>
  <div class="upgrade">
    <el-row>
      <el-col :span="24">
        <div class="title">欢乐户外APP资源升级配置</div>
      </el-col>
      <el-col :span="24">
        <el-row>
          <el-col :span="12">
            <div class="card">
              <el-form label-width="80px">
                <el-form-item label="系统类型">
                  <el-input value="Android" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="版本号">
                  <el-input v-model="androidWgt.version" type="number" placeholder="版本号请务必大于当前正在运行的版本"></el-input>
                </el-form-item>
                <el-form-item label="下载地址">
                  <el-input v-model="androidWgt.url" placeholder="资源包下载地址"></el-input>
                </el-form-item>
                <el-form-item label="开启更新">
                  <el-switch v-model="androidWgt.switch"></el-switch>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="setAndroidWgt">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="card" style="margin-left: 5px">
              <el-form label-width="80px">
                <el-form-item label="系统类型">
                  <el-input value="iOS" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="版本号">
                  <el-input v-model="iosWgt.version" type="number" placeholder="版本号请务必大于当前正在运行的版本"></el-input>
                </el-form-item>
                <el-form-item label="下载地址">
                  <el-input v-model="iosWgt.url" placeholder="资源包下载地址"></el-input>
                </el-form-item>
                <el-form-item label="开启更新">
                  <el-switch v-model="iosWgt.switch"></el-switch>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="setIOSWgt">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <div class="title">欢乐户外APP版本升级配置</div>
      </el-col>
      <el-col :span="24">
        <el-row>
          <el-col :span="12">
            <div class="card">
              <el-form label-width="80px">
                <el-form-item label="系统类型">
                  <el-input value="Android" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="版本号">
                  <el-input v-model="android.version" type="number" placeholder="版本号请务必大于当前正在运行的版本"></el-input>
                </el-form-item>
                <el-form-item label="下载地址">
                  <el-input v-model="android.url" placeholder="资源包下载地址"></el-input>
                </el-form-item>
                <el-form-item label="开启更新">
                  <el-switch v-model="android.switch"></el-switch>
                </el-form-item>
                <el-form-item label="更新描述">
                  <el-input type="textarea" v-model="android.desc"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="setAndroid">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="card" style="margin-left: 5px">
              <el-form label-width="80px">
                <el-form-item label="系统类型">
                  <el-input value="iOS" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="版本号">
                  <el-input v-model="ios.version" type="number" placeholder="版本号请务必大于当前正在运行的版本"></el-input>
                </el-form-item>
                <el-form-item label="下载地址">
                  <el-input v-model="ios.url" placeholder="App Store 下载地址"></el-input>
                </el-form-item>
                <el-form-item label="开启更新">
                  <el-switch v-model="ios.switch"></el-switch>
                </el-form-item>
                <el-form-item label="更新描述">
                  <el-input type="textarea" v-model="ios.desc"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="setIOS">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      androidWgt: {
        version: '',
        url: '',
        switch: true
      },
      iosWgt: {
        version: '',
        url: '',
        switch: true
      },
      android: {
        version: '',
        url: '',
        desc: '',
        switch: true
      },
      ios: {
        version: '',
        url: '',
        desc: '',
        switch: true
      }
    }
  },
  methods: {
    getAndroidWgt () {
      this
        .$api
        .configure
        .getAppUpgradeWgt('android')
        .then(r => {
          if (!this.isEmptyObject(r)) {
            this.androidWgt = r
          }
        })
    },
    getIOSWgt () {
      this
        .$api
        .configure
        .getAppUpgradeWgt('ios')
        .then(r => {
          if (!this.isEmptyObject(r)) {
            this.iosWgt = r
          }
        })
    },
    setAndroidWgt () {
      if (!this.androidWgt.version) {
        this.toast('请填写版本号', 'warning')
        return false
      }
      if (!this.androidWgt.url) {
        this.toast('缺少资源下载地址', 'warning')
        return false
      }
      this.showLoading()
      this
        .$api
        .configure
        .setAppUpgradeWgt({
          os: 'android',
          data: this.androidWgt
        })
        .then(r => {
          this.toast('保存成功')
        })
    },
    setIOSWgt () {
      if (!this.iosWgt.version) {
        this.toast('请填写版本号', 'warning')
        return false
      }
      if (!this.iosWgt.url) {
        this.toast('缺少资源下载地址', 'warning')
        return false
      }
      this.showLoading()
      this
        .$api
        .configure
        .setAppUpgradeWgt({
          os: 'ios',
          data: this.iosWgt
        })
        .then(r => {
          this.toast('保存成功')
        })
    },
    getAndroid () {
      this
        .$api
        .configure
        .getAppUpgrade('android')
        .then(r => {
          if (!this.isEmptyObject(r)) {
            this.android = r
          }
        })
    },
    getIOS () {
      this
        .$api
        .configure
        .getAppUpgrade('ios')
        .then(r => {
          if (!this.isEmptyObject(r)) {
            this.ios = r
          }
        })
    },
    setAndroid () {
      if (!this.android.version) {
        this.toast('请填写版本号', 'warning')
        return false
      }
      if (!this.android.url) {
        this.toast('缺少资源下载地址', 'warning')
        return false
      }
      this.showLoading()
      this
        .$api
        .configure
        .setAppUpgrade({
          os: 'android',
          data: this.android
        })
        .then(r => {
          this.toast('保存成功')
        })
    },
    setIOS () {
      if (!this.ios.version) {
        this.toast('请填写版本号', 'warning')
        return false
      }
      if (!this.ios.url) {
        this.toast('缺少App Store下载地址', 'warning')
        return false
      }
      this.showLoading()
      this
        .$api
        .configure
        .setAppUpgrade({
          os: 'ios',
          data: this.ios
        })
        .then(r => {
          this.toast('保存成功')
        })
    }
  },
  created () {
    this.getAndroidWgt()
    this.getIOSWgt()
    this.getAndroid()
    this.getIOS()
  }
}
</script>
<style scoped lang="sass">
  .upgrade
    width: 100%
    height: auto
    .title
      width: 100%
      height: 3rem
      background-color: #ffffff
      display: flex
      align-items: center
      font-size: 1.4rem
      padding: 1rem
    .card
      width: calc(100% - 5px)
      padding: 20px
      background-color: #ffffff
      height: auto
</style>
